<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";

const {proxy} = getCurrentInstance()

const tabOpacity = ref(0)
const tabLeft = ref("10px")

const props = defineProps({
  tabTitleList: {
    type: Array,
    default: () => []
  }
})

let scrollEle

const handlerScroll = (e) => {
  // 设置tabOpacity
  const scrollTop = e.target.scrollTop
  tabOpacity.value = scrollTop / 200 <= 1 ? e.target.scrollTop / 200 : 1

  // 设置left距离
  if (scrollTop >= props.tabTitleList[2].offsetTop) {
    const left = document.querySelector(`#${props.tabTitleList[2].leftAttr}`).offsetLeft
    tabLeft.value = left + "px"
  } else if (scrollTop >= props.tabTitleList[1].offsetTop) {
    const left = document.querySelector(`#${props.tabTitleList[1].leftAttr}`).offsetLeft
    tabLeft.value = left + "px"
  } else if (scrollTop >= props.tabTitleList[0].offsetTop) {
    const left = document.querySelector(`#${props.tabTitleList[0].leftAttr}`).offsetLeft
    tabLeft.value = left + "px"
  }
}


onMounted(() => {
  scrollEle = document.querySelector("#scroll-content")
  scrollEle.addEventListener("scroll", handlerScroll)
})


/*
* 修改线性位置
* */
const changeTabLine = async (row, e) => {
  tabLeft.value = e.target.offsetLeft + "px"
  scrollEle.removeEventListener("scroll", handlerScroll)
  await scrollEle.scrollTo({top: row.offsetTop, behavior: "smooth"})
  setTimeout(() => {
    scrollEle.addEventListener("scroll", handlerScroll)
  }, 500)
}
</script>

<template>
  <!--tab栏-->
  <div class="tab" :style="{'--opacityVal': tabOpacity, '--tabLeft': tabLeft}">
    <div class="flex px-[10px] justify-between py-[15px]">
      <!--返回图标-->
      <div class="icon rounded-[50%] p-[5px] flex justify-center items-center" @click="proxy.$router.back()">
        <van-icon name="arrow-left" size="20" color="#fff"/>
      </div>
      <!--功能图标-->
      <div class="flex">
        <div class="icon rounded-[50%] p-[5px] flex justify-center items-center">
          <van-icon name="star-o" size="20" color="#fff"/>
        </div>
        <div class="icon rounded-[50%] p-[5px] flex justify-center items-center">
          <van-icon name="share-o" size="20" color="#fff"/>
        </div>
        <div class="icon rounded-[50%] p-[5px] flex justify-center items-center">
          <van-icon name="ellipsis" size="20" color="#fff"/>
        </div>
      </div>
    </div>
    <div class="flex tab-after relative" :style="{'opacity': tabOpacity}">
      <div class="flex-1 flex justify-center py-[10px] mx-[10px]"
           v-for="(item) in tabTitleList"
           :id="item.leftAttr"
           @click="changeTabLine(item,$event)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tab {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  z-index: 9999;
  background-color: rgba(255, 255, 255, var(--opacityVal));
}

.tab-after::after {
  content: "";
  position: absolute;
  left: var(--tabLeft);
  bottom: 0px;
  width: 110px;
  height: 2px;
  background-color: #000;
  transition: all .3s;
}

.icon {
  background: rgba(0, 0, 0, .3);
  margin-right: 10px;
}
</style>
